<template>
    <div class="popup_wrap activity">
        <div class="register_detail">
            <navbar>报名详情</navbar>

          <div class="wrapper2" :class="{ 'wrapper': isCanCancel || isCanSign }" v-if="detail.data">
            <div class="content">
              <div class="status">
                <h2 :class="{ 'fade': detail.data.status==3 || detail.data.member_status==3 }">{{ detail.data.status | register_status_txt(detail.data.member_status) }}</h2>
                <div class="forwardIcon info" @click="jump_detail">
                  <h3>{{ detail.data.title }}</h3>
                  <p>{{ detail.data.subtitle }}</p>
                </div>
              </div>
              <dl class="acInfo">
                <dt>活动信息</dt>
                <dd class="vmc-1px-top">
                  <span>时间</span>
                  <p>{{ detail.data.starts_at | time(detail.data.ends_at) }}</p>
                </dd>
                <dd>
                  <span>地点</span>
                  <p>{{ detail.data.address }}</p>
                </dd>
                <dd>
                  <span>教练</span>
                  <p>{{ detail.data.coach.nick_name }}</p>
                </dd>
                <dd class="mobile">
                  <a href="'tel:'+detail.data.coach.mobile">
                    <span>教练手机</span>
                    <p>{{ detail.data.coach.mobile }}</p>
                  </a>
                </dd>
              </dl>
            </div>
            <div class="bottomBar" :class="{ 'bottomBar_2': isCanCancel && isCanSign }">
              <button class="bgWhite" @click="cancelConfirm" v-if="isCanCancel">取消报名</button>
              <button class="bgRed" @click="scanner" v-if="isCanSign">扫码签到</button>
            </div>
          </div>
        </div>
        <popup :show="showPageCancelSuc">
          <page-cancel-suc :activity="detail.data"></page-cancel-suc>
        </popup>
    </div>
</template>
<script type="text/ecmascript-6">

  import js from '../../../../cores/user/register_detail.vue';
  export default {
    extends: js
  }
</script>
<style rel="stylesheet/less" lang="less">
  @import "../../../../styles/ot.less";
</style>
